<!DOCTYPE html>
<html>

	<head>
		<script type="text/javascript">
			var max = 14;
		</script>
		<meta charset="UTF-8">
		<title>示例目录列表</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				background-color: #0088CC;
			}
			
			.list {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				width: 200px;
				list-style: none;
				background-color: #0088CC;
				border: 1px solid #000000;
			}
			
			.list li {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				height: 40px;
				text-align: center;
				color: #FFFFFF;
				text-decoration: none;
				font-size: 20px;
			}
			
			.list li:hover,.list li.active {
				background-color: #00BFFF;
				cursor: pointer;
				border-bottom: 4px solid #FFFFFF;
			}
			.display {
				background-color: #FFFFFF;
				margin-left: 210px;
				position: fixed;
				top: 40px;
			}
			.toolbar{
				position: fixed;
				margin-left: 210px;
				top: 5px;
				height: 30px;
				background-color: #FFFFAA;
				padding: 2px;
				box-sizing: border-box;
			}
		</style>
		<script type="text/javascript">
			var i = 0;
				
			function getUrl(index) {
				var url = index + "/index.html";
				if(index < 10) {
					url = "0" + url;
				}
				return url;
			}

			function getItem(index) {
				var li = document.createElement("li");
				li.dataset.id = index;
				li.dataset.url=getUrl(index);
				if(index < 10) {
					li.innerText="example-0"+index;
				}else{
					li.innerText="example-"+index;
				}
				return li;
			}
			window.onload = function() {
				var list = document.getElementById("list");
				var display = document.getElementById("display");
				var toolbar = document.getElementById("toolbar");
				var btnOpenInNew = document.getElementById("open-in-new");
				var lblDisplayTitle = document.getElementById("display-title");
				while(i <= max) {
					list.appendChild(getItem(i));
					i = i + 1;
				}
				list.addEventListener("click",function (e) {
					var li=e.target;
					if(e.target.nodeName!=="LI") return;
					display.setAttribute("src",li.dataset.url);
					for (var i in this.children){
						this.children[i].className="";
					}
					li.className+="active";
				})
				display.addEventListener("load",function () {
					var title=display.contentDocument.title;
					if(title.length===0)title="无";
					lblDisplayTitle.innerText="标题:"+title;
				})
				btnOpenInNew.addEventListener("click",function () {
					window.open(display.src,"_blank");
				})
				display.style.width=(window.innerWidth-230)+"px";
				display.style.height=(window.innerHeight-40)+"px";
				toolbar.style.width=(window.innerWidth-230)+"px";
				lblDisplayTitle.innerText="标题:"+display.contentDocument.title;
			}
		</script>
	</head>

	<body>
		<ul id="list" class="list"></ul>
		<div id="toolbar" class="toolbar">
			<button id="open-in-new">新窗口打开</button>
			<label id="display-title">xx</label>
		</div>
		<iframe src="00/index.html" id="display" class="display" width="" height=""></iframe>
	</body>

</html>